<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            position: absolute;
            top: 50px;
            left: 10px;
        }
        .container{
            width: 100px;
            height: 2000px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container"></div>
    <div class="box"></div>
    <script>
        // 事件对象：任意一个事件 在触发的时候 内置一个对象 描述事件的一些相关信息；

        document.querySelector(".box").onclick = function(e){
            // 接收的 形参 e 就是事件对象 ，里面包含事件有关的一些信息；
            // console.log("点击了",e);
            // 事件对象有兼容性问题 ：
            // 主流浏览器 ： e 形参获取事件对象
            // ie8及一下 获取 事件对象 是通过 window.event;
            var event = e || window.event;
            console.log(event);


            /* 
                事件对象里的参数：
                    altKey ： 事件触发的时候是否 按下了alt 按键
                    ctrlKey ： 是否按下了ctrl
                    shiftKey ：是否按下了 shift
                    button： 0 左键  1 滚轮 2 右键
                    
                    clientX： 事件触发 鼠标距离浏览器（视口）左边的偏移量
                    clientY： 事件触发时候 鼠标距离浏览器上边的偏移量

                    offsetX: 事件触发的时候 鼠标相对于事件源的左边偏移量
                    offsetY: 事件触发的时候，鼠标相对于事件源的上边偏移量

                    pageX: 事件触发 的时候 鼠标相对于页面的 左边偏移量
                    pageY: 事件触发的时候鼠标相对于页面的上面偏移量

                    target : 事件触发的元素目标

                    type ： 事件类型

            
            */
        //    console.log(event.clientY);
        // console.log(event.offsetX);
        // console.log(event.clientX);
            // console.log(event.pageY);
            console.log(event.target);
        }




        /* 
          一、  width 、height  left  top  和 元素有关 ，元素的属性
            1.clientWidth、clientHeight ： 自身 + padding
            2.offsetWidth 、offsetHeight ： 自身 + border + padding
            3.offsetLeft 、offsetTop 
                一、没有定位 是相对浏览器的左边和上边的偏移量
                二、有定位 ： 相对于定位父级的左边和上边偏移量
            4.clientLeft 、clientTop ：左边和上边边框的宽度；

          二、 x 、y 和鼠标有关，鼠标的坐标
            1.clientX、clientY ：鼠标 相对浏览器的左边和上边的偏移量
            2.offsetX、offsetY ：鼠标 相对于事件源左边和上边的距离
            3.pageX、pageY ：鼠标 相对于页面的左边和上边的偏移量
        
        
        
        
        
        
        
        */

    </script>
</body>
</html>